<template>
  <div class="pos">
      <el-row >
          <el-col :span='7' class="posOrder" id='orderList'>
            <el-tabs>
              <el-tab-pane label='点餐'>
                <el-table border style='width:100%' :data='tableData'>
                  <el-table-column prop='goodsName' label='商品名称' >
                  </el-table-column>
                  <el-table-column prop='count' label='商品数量' width=80>
                  </el-table-column>
                  <el-table-column prop='price' label='商品金额'  width=80>
                  </el-table-column>
                  <el-table-column  label='操作' width=90 fixed='right'>
                    <template scope = 'scope'>
                      <el-button type='text' size='small' @click = deletesingleList(scope.row)>删除</el-button>
                      <el-button type='text' size='small' @click="adddOrderList(scope.row)">增加</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class='totalDiv'>
                  &nbsp;<small>数量：</small>{{totalNum}} &nbsp;&nbsp;&nbsp;&nbsp;<small>金额：</small> {{totalMoney}}元
                </div>
                <div class='divBtn'>
                  <el-button type='warning'>
                    挂单
                  </el-button>
                  <el-button type='danger' @click = deleteAllList()>
                    删除
                  </el-button>
                  <el-button type='success' @click = checkout>
                    结账
                  </el-button>
                </div>
              </el-tab-pane>
              <el-tab-pane label='挂单'>挂单</el-tab-pane>
              <el-tab-pane label='外卖'>外卖</el-tab-pane>
            </el-tabs>
          </el-col>
          <!--商品展示-->
          <el-col :span="17" class="posOrder" id='productList'>
            <div class='oftenGoods'>
              <div class='title'>常用产品</div>
              <div class='oftenGoodsList'>
                <ul>
                  <!-- :key保证数组的每一条数据的唯一性，不写key会警告 -->
                  <li v-for="(goods,index) in oftenGoodsData" :key="index" @click = adddOrderList(goods)>
                    <span>{{index+1}}</span>
                    <span>{{goods.goodsName}}</span>
                    <span class='oftenGoodsgoodsCount'>￥{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class='goodsType'>
              <el-tabs>
                <el-tab-pane label='汉堡'>
                  <div>
                    <ul class='cookList'>
                      <li v-for='(item, index) in cookListData0' :key="index" @click = adddOrderList(item)>
                        <span class="foodName">{{item.goodsName}}</span>
                        <span class="foodgoodsCount">{{item.price}}</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label='小吃'>
                  <div>
                    <ul class='cookList'>
                      <li v-for='(item, index) in cookListData1' :key="index" @click = adddOrderList(item)>
                        <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                        <span class="foodName">{{item.goodsName}}</span>
                        <span class="foodgoodsCount">{{item.price}}</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label='饮料'>
                  <div>
                    <ul class='cookList'>
                      <li v-for='(item, index) in cookListData2' :key="index" @click = adddOrderList(item)>
                        <span class="foodName">{{item.goodsName}}</span>
                        <span class="foodgoodsCount">{{item.price}}</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label='套餐'>
                  <div>
                    <ul class='cookList'>
                      <li v-for='(item, index) in cookListData3' :key="index" @click = adddOrderList(item)>
                        <span class="foodName">{{item.goodsName}}</span>
                        <span class="foodgoodsCount">{{item.price}}</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
      </el-row>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Pos',
  data () {
    return {
      tableData: [],
      oftenGoodsData: [],
      cookListData0: [],
      cookListData1: [],
      cookListData2: [],
      cookListData3: [],
      totalMoney: 0,
      totalNum: 0
    }
  },
  created: function () {
    axios.get('https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods').then(res => {
      this.oftenGoodsData = res.data
    }).catch(error =>
      error
    )
    axios.get('https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/typeGoods').then(res => {
      console.log(res)
      this.cookListData0 = res.data[0]
      this.cookListData1 = res.data[1]
      this.cookListData2 = res.data[2]
      this.cookListData3 = res.data[3]
    }).catch(error =>
      alert(error)
    )
  },
  mounted: function () {
    var orderHeight = document.body.clientHeight
    document.getElementById('orderList').style.height = orderHeight + 'px'
    document.getElementById('productList').style.height = orderHeight + 'px'
  },
  methods: {
    adddOrderList (goods) {
      this.totalMoney = 0
      this.totalNum = 0
      // 商品是否已经存在于订单列表中
      let isHave = false
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId === goods.goodsId) {
          isHave = true
        }
      }
      // 根据判断后编写业务逻辑
      if (isHave) {
        // 改变列表商品的数量
        let arr = this.tableData.filter(a => a.goodsId === goods.goodsId)
        arr[0].count++
        console.log(arr)
      } else {
        let newsGoods = {goodsId: goods.goodsId, goodsName: goods.goodsName, price: goods.price, count: 1}
        console.log(newsGoods)
        this.tableData.push(newsGoods)
        console.log(this.tableData)
      }
      this.getAllMoney()
    },
    // 删除单个商品
    deletesingleList (goods) {
      this.tableData = this.tableData.filter(o => o.goodsId !== goods.goodsId)
      this.getAllMoney()
    },
    // 删除所有订单
    deleteAllList () {
      this.tableData = []
      this.totalMoney = 0
      this.totalNum = 0
    },
    // 汇总数量和金额
    getAllMoney () {
      this.totalMoney = 0
      this.totalNum = 0
      if (this.tableData) {
        this.tableData.forEach((element) => {
          this.totalNum += element.count
          this.totalMoney = this.totalMoney + (element.price * element.count)
        })
      }
    },
    checkout () {
      if (this.totalNum !== 0) {
        this.tableData = []
        this.totalMoney = 0
        this.totalNum = 0
        this.$message({
          message: '结账成功',
          type: 'success'
        })
      } else {
        this.$message.error('请点餐！')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .posOrder{
    background-color: #f9fafc;
    border-right:1px solid #c0ccda;
    height: 100%;
    display: inline-block;
  }
  .divBtn{
    margin-top:10px;
  }
  .title{
    height: 20px;
    border-bottom: 1px solid #03dce6;
    background-color: #f9fafc;
    padding: 10px;
    text-align: left;
  }
  .oftenGoodsList ul li{
    list-style: none;
    float: left;
    border: 1px solid #e5e9f2;
    padding: 10px;
    margin: 10px;
    background-color: #fff;
  }
  .oftenGoodsgoodsCount{
    color: #409EFF;
  }
  .goodsType{
    clear: both;
    margin-left: 10px;
    margin-right: 10px;
  }
  .cookList li{
    list-style: none;
    width:23%;
    border:1px solid #E5E9F2;
    height: auot;
    overflow: hidden;
    background-color:#fff;
    padding: 2px;
    float:left;
    margin: 2px;
   }
   .cookList li span{
        display: block;
        float:left;
   }
   .foodImg{
       width: 40%;
   }
   .foodName{
       font-size: 16px;
       padding-left: 10px;
       color:brown;
   }
   .foodgoodsCount{
       font-size: 16px;
       padding-left: 10px;
       padding-top:10px;
   }
   .totalDiv{
     background-color: #fff;
     padding:10px;
     border-bottom:1px solid #e5e9f2;
   }
</style>
